<!--
 * @Author: Shber
 * @Date: 2024-07-01 15:49:30
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-04 18:05:48
 * @Description: 
-->
<template>
<view class="content">
  <view class="white_card user_info">
    <image class="user_pic" mode="aspectFill" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"></image>
    <text class="user_name ml_10">王老二家的小黄狗</text>
  </view>

  <view class="white_card mt_10">
    <text class="title">常用功能</text>
    <view class="model_list">
      <view class="item" v-for="item in modelList" :key="item.icon">
        <my-icon :fontSize="60" color="#999999" :name="item.icon"/>
        <text class="label">{{item.label}}</text>
      </view>
    </view>
  </view>

  <view class="white_card mt_10">
    <text class="title">系统管理</text>
    <view class="model_list">
      <view class="item" @click="logoutTip = true">
        <my-icon :fontSize="60" color="#999999" name="myicon-tuichu-e66e"/>
        <text class="label">退出登录</text>
      </view>
    </view>
  </view>
</view>

<tm-modal
    color="white"
    okColor="primary"
    okText="确定"
    cancelColor="white"
    splitBtn
    height="320"
    v-model:show="logoutTip"
    @ok="confirm"
  >
  <text class="modal_text">确认退出登录？</text>
</tm-modal>

<m-tabbar :active="4"/>

</template>
<script setup>
  import { ref, reactive } from 'vue'
  import mTabbar from '@/components/Tabbar'
  import myIcon from '@/components/MyIcon/index.vue'

  const logoutTip = ref(false)
  const modelList = reactive([
    {label:'订单查询', icon:'myicon-dingdan-e6b5', link:''},
    {label:'商品管理', icon:'myicon-shangpin-e612', link:''},
    {label:'发货地址', icon:'myicon-dizhi-e604', link:''},
    {label:'运费模版', icon:'myicon-yunfeijisuan-e776', link:''},
    {label:'打印设置', icon:'myicon-printer-e617', link:''},
    {label:'配送管理', icon:'myicon-baoguofahuo-xianxing-e884', link:''},
    {label:'数据统计', icon:'myicon-shujutongji1-e644', link:''},
  ])

  const confirm=()=>{
    uni.redirectTo({
      url: '/pages/login/index?id=1'
    });
  }
</script>
<style lang="scss" scoped>
.user_info{
  display: flex; align-items: center;
  .user_pic{width: 60px; height: 60px; border-radius: 50%; border: 1rpx solid #f8f8f9;}
  .user_name{font-size: 16px; font-weight: 500; color: #333;}
}
.model_list{
  display: flex; flex-wrap: wrap;
  .item{display: flex; flex-direction: column; padding: 12.6px;}
  .label{color: #666; font-size: 14px;}
}
.title{font-size: 16px; font-weight: 500; margin-bottom: 20px;}
.modal_text{display: block; text-align: center; font-size: 16px;}
</style>